Cascading Style Sheets

Slides: OpenOffice PowerPoint
Reading: HFHTML Ch. 8

Homework: due 10/11. Before you add or change files on your web site, prepare a version of what you want your web site to look like on your thumb drive. Use an FTP client to synchronize your web site to the version on your thumb drive.

Exam 1 answers.

Lab, part I

• Here is the code for chapter 8 from the text's web site.
• Download and unzip it into your My Documents directory.
• Edit the lounge.html file in lounge directory.
• 1. Add the style described in the book lounge.html to change:
     • the font in paragraphs to maroon
     • make headings use sans-serif fonts in gray
     • add underlining (bottom-border) to h1 headings
  2. Now, move your style rules to a new page lounge.css, and link it to lounge.html.
  3. Use the same set of style rules (ie link to lounge.css) for directions.html, and exilir.html.
• 1. Add classes to the elixir.html and lounge.css to make:
     • the paragraph about green tea have green text.
     • the paragraph about raspberry elixir have blue text.
     • the paragraph about blueberry elixir have purple text.
  2. Do the exercise on p 326.
  3. Validate your lounge.css file using the CSS validator: http://jigsaw.w3.org/css-validator

Lab, part II

On your thumb drive:

• In your about me directory, create a style sheet for your website with at least 3 rules and 1 class.
• Link each of your about me pages to this style sheet.
• In your labs directory, create a subdirectory for today's lab.
• Transfer the lounge directory to this new subdirectory.
• Create a hyperlink from your labs directory's index.html to the page you worked on today.

Lab, part III

• Using an FTP client, synchronize your web site to the image on your thumbdrive.

Shut down your computer and turn off your display before leaving the lab (always).